<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.category {
	margin: 5px;
	padding: 10px;
	background-color: #8ABD93;
}

.contact,.actions,.participants {
	margin: 5px;
	padding: 10px;
	background-color: #718E76;
}
</style>

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/pure.js"></script>
<script type="text/javascript">
	var directive = {
		'div.category' : {
			'category<-actionCategory' : {
				'h1.categoryName' : 'category.name',
				'p.categoryDescription' : 'category.description',
				'p.categoryVerified' : 'category.verified',
				'a.contactName@href+' : 'category.createdBy.id'
			}
		}
	};
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			url : "/dasding/api/actions/categories",
			success : function(data) {
				console.log(data);
				$('#data').render(data, directive);
			}
		});
	});
</script>

</head>
<body>

	<!-- HTML template -->
	<div id="data">
		<div class="category">
			<h1 class="categoryName"></h1>
			<p class="categoryDescription"></p>
			<div class="contact">
				<a class="contactName" href="addUser.html?userid=">Creator</a> <span
					class="contactPhone"></span> <span class="contactMail"></span>
			</div>
			<p class="categoryVerified"></p>
		</div>
	</div>
</body>
</html>
